<template>
    <div class="password_box" v-if="isvidels" @click="isvidel_f()">
      <div class="password_box_back" @click.stop="isvidel_ty()">
        <div class="tip">提示：数字的相加</div>
        <div class="pw_box_mima">
            <div class="pw_box">
                <input type="number" name="" id="" class="pw_box_input" @input="inspect($event)">
            </div>
            <div class="pw_box">
                <input type="number" name="" id="" class="pw_box_input" @input="inspect($event)">
            </div>
        </div>
        <div class="btn_box">
            <button class="sumit_btn" @click="sumit_inspect()">提交</button>
        </div>
        <div class="text_tip">
            <Transition name="text-tip">
                <div v-if="text_tip_isvidel.ty" :class="text_tip_isvidel.type">
                    {{text_tip_isvidel.message}}
                </div>
            </Transition>
        </div>
      </div>
    </div>
</template>

<script setup>
import {defineProps,nextTick,ref,watch} from 'vue';
import { useRouter } from 'vue-router'
const props = defineProps({
    isvidel:{
        type:Boolean,
        default:false
    },
})
watch(props,()=>{
    isvidels.value = true;
    if(isvidels.value){
        nextTick(()=>{
            inspect();
        })
    }
})
const isvidels = ref(props.isvidel)
const text_tip_isvidel = ref({
    ty:false,
    message:'',
    type:'error'
})

function isvidel_f(){
    isvidels.value = !isvidels.value
}
function isvidel_ty(){
    
}
// 检查输入字段数和获取焦点

function inspect(event){
    text_tip_isvidel.value.ty = false;
    const pw_box_input = document.getElementsByClassName('pw_box_input');
    if(!event){
        return;
    }
    if(event.inputType === 'deleteContentBackward' || event.inputType === 'deleteContentForward'){
        for(let i = 0; i<pw_box_input.length; i++){
            if (pw_box_input[i].value) {
                pw_box_input[i].focus();
                break;
                // 这里可以执行有内容时的逻辑
            }
        }
    }else{
        for(let i = 0; i<pw_box_input.length; i++){
            if (pw_box_input[i].value) {
                if(pw_box_input[i].value.length>1){
                    // 如果内容大于一个字符就只保留一个
                    pw_box_input[i].value = pw_box_input[i].value.charAt(0);
                }
                // 这里可以执行有内容时的逻辑
            } else {
                pw_box_input[i].focus();
                break;
                // 这里可以执行无内容时的逻辑
            }
        }
    }
    
}

const number_time = ref(3)
let settime = null;

// 使用 useRouter 创建一个 router 实例
const router = useRouter()
// 提交检查
function sumit_inspect(){
    let text = '';
    const pw_box_input = document.getElementsByClassName('pw_box_input');
    for(let i = 0; i<pw_box_input.length; i++){
        if (pw_box_input[i].value) {
            text = text + pw_box_input[i].value.toString();
            // 这里可以执行有内容时的逻辑
        } else {
            pw_box_input[i].focus();
            text_tip_isvidel.value.ty = true;
            text_tip_isvidel.value.message = '有空没填好奥';
            text_tip_isvidel.value.type = 'error';
            break;
            // 这里可以执行无内容时的逻辑
        }
    }
    if(text == '45'){
        text_tip_isvidel.value.ty = true;
        text_tip_isvidel.value.message = '数字正确-提示：一直点';
        text_tip_isvidel.value.type = 'success';
        // 设置数据存储
        localStorage.setItem('z_reward_list', 'true');
    }else if(text == '31'){
        if(settime == null){
            text_tip_isvidel.value.ty = true;
            text_tip_isvidel.value.message = `666 - 这也被你猜到了${number_time.value}`;
            text_tip_isvidel.value.type = 'success';
            // 计时三秒
            settime = setInterval(()=>{
                number_time.value = number_time.value-1;
                text_tip_isvidel.value.message = `666 - 这也被你猜到了${number_time.value}`;
            },1000)

            // 等三秒结束倒计时
            setTimeout(()=>{
                clearInterval(settime)
                settime = null;
                number_time.value = 3
                router.push({ path: '/game' })
            },3000)
        }
        
    }else{
        text_tip_isvidel.value.ty = true;
        text_tip_isvidel.value.message = '数字错误';
        text_tip_isvidel.value.type = 'error';
    }
}

</script>

<style lang="scss" scoped>
%center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.password_box {
  z-index: 999;
  position: fixed;
  inset: 0;
  @extend %center;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(23, 31, 52, 0.95));
  backdrop-filter: blur(12px);
  animation: fadeIn 0.4s ease;

  .password_box_back {
    width: 90%;
    max-width: 380px;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 28px;
    padding: 32px 24px;
    box-shadow: 
      0 25px 50px -12px rgba(0, 0, 0, 0.25),
      0 0 0 1px rgba(255, 255, 255, 0.1);
    animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);

    .tip {
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      color: #1e293b;
      margin-bottom: 28px;
      letter-spacing: 0.5px;
    }

    .pw_box_mima {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin: 24px 0;

      .pw_box {
        position: relative;
        width: 60px;
        height: 60px;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -8px;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          height: 2px;
          background: #e2e8f0;
          border-radius: 2px;
          transition: all 0.3s ease;
        }

        &:focus-within::after {
          background: #6366f1;
          box-shadow: 0 0 8px rgba(99, 102, 241, 0.2);
        }

        .pw_box_input {
          width: 100%;
          height: 100%;
          border: 2px solid #e2e8f0;
          border-radius: 16px;
          font-size: 24px;
          font-weight: 600;
          color: #334155;
          text-align: center;
          background: white;
          transition: all 0.3s ease;
          
          &:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
          }

          &::-webkit-inner-spin-button,
          &::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
          }
        }
      }
    }

    .btn_box {
      @extend %center;
      margin: 32px 0 24px;

      .sumit_btn {
        padding: 14px 36px;
        border: none;
        border-radius: 14px;
        background: linear-gradient(135deg, #6366f1, #4f46e5);
        color: white;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 16px rgba(79, 70, 229, 0.25);
        }
        
        &:active {
          transform: translateY(0);
        }
      }
    }

    .text_tip {
      height: 24px;
      @extend %center;
      
      .error {
        color: #ef4444;
        font-size: 14px;
        font-weight: 500;
        animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
      }
      
      .success {
        color: #22c55e;
        font-size: 14px;
        font-weight: 500;
        animation: bounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }
    }
  }
}

// 动画
.text-tip-enter-active {
  animation: fadeInUp 0.3s ease-out;
}

.text-tip-leave-active {
  animation: fadeOutDown 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(12px);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

@keyframes bounceIn {
  from { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.9); }
  to { transform: scale(1); opacity: 1; }
}
</style>